<template>
    <div>
        <div>
            <!-- 选择框绑定 v-model 的值 -->
            <el-select v-model="selectedCompetitionName" placeholder="请选择" @change="handleCompetitionChange">
                <el-option v-for="item in all_competition_data" :key="generateKey(item)" :label="item.competition_name"
                    :value="item.competition_name" :disabled="item.disabled">
                </el-option>
            </el-select>
        </div>
        <div>
            <el-table :data="filteredTableData" style="width: 100%">
                <el-table-column prop="id" label="场次" width="50">
                </el-table-column>
                <el-table-column prop="date" label="日期" width="150">
                </el-table-column>
                <el-table-column label="比赛信息">
                    <el-table-column prop="place" label="场地" width="120">
                    </el-table-column>

                    <el-table-column prop="time" label="时间" width="120">
                    </el-table-column>
                    <el-table-column prop="team" label="队伍" width="300">
                    </el-table-column>
                    <el-table-column prop="judge" label="裁判" width="300">
                    </el-table-column>
                    <el-table-column prop="supervise" label="比赛监督" width="120">
                    </el-table-column>

                </el-table-column>
            </el-table>
        </div>
    </div>

</template>
<script>
export default {
    data() {
        return {
            tableData: require("@/assets/jsonData/competition_SchoolCup1.json"),
            all_competition_data: require("@/assets/jsonData/competition.json"),
            selectedCompetitionName: ''
        }
    },
    computed: {
        filteredTableData() {
            // 过滤出匹配 selectedCompetitionName 的比赛数据
            return this.tableData.filter(item => item.competition_name === this.selectedCompetitionName);
        }
    },
    methods: {
        // 处理比赛变更事件
        handleCompetitionChange(newVal) {
            // 当选择框的值变更时，更新 selectedCompetitionName
            this.selectedCompetitionName = newVal;
            console.log(this.filteredTableData)
        },
        generateKey(item) {
            return { id: item.id, competition_name: item.competition_name };
        },
    },
    mounted() {
        console.log('Table Data:', this.tableData);
        console.log('Competition Data:', this.all_competition_data);
    }
}
</script>
<style scoped>
#main {
    width: 100%;
    display: flex;
    justify-content: center;
}

p {
    font-size: 18px;
    text-align: center;
}
</style>